<template>
  <!-- <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    default-expand-all
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column
      align="center"
      prop="title"
      label="名称"
      sortable
      width="150"
    />
    <el-table-column align="center" label="是否可见" sortable width="112">
      <template slot-scope="tableData1">
        <el-checkbox
          v-model="tableData1.row.isBind"
          @change="changecheck(tableData1.row, $event)"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" label="排序" width="84">
      <template slot-scope="tableData2">
        <a-select
          v-model="tableData2.row.orderId"
          show-search
          option-filter-prop="children"
          style="width: 100%"
          @change="value => changeSelect(value, tableData2.row)"
        >
          <template v-for="item in tableLen">
            <a-select-option v-if="selectArr1.includes(item)" :key="item" :value="item" disabled>
              {{ item }}
            </a-select-option>
            <a-select-option v-else :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </template>
        </a-select>
      </template>
    </el-table-column>
  </el-table> -->
  <div>
    <ul
      style="display: flex;
      text-align: center;
      padding: 5px 0;list-style:none;height:42px;line-height:32px;margin:0;background: #f7f8fa;"
    >
      <li style="width: 40%;">名称</li>
      <li style="width: 30%;">
        <el-checkbox
          v-model="tabledata.flagAll"
          style="margin-right:5px;"
          @change="changeAll"
        />是否可见
      </li>
      <li style="width: 30%;">排序</li>
    </ul>
    <draggable
      :list="tableData"
      :options="{ forceFallback: true }"
      style="background: #ffffff;max-height:74vh;overflow-y:auto;"
      @update="changePlace"
    >
      <div v-for="item in tableData" :key="item.id" class="firstLevel">
        <div class="leverFirst">
          <div class="leverFirst_name">
            <i
              v-if="item.children"
              :class="!item.flag ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
              style="margin-right:5px;cursor: pointer"
              @click="hiddenchildren(item)"
            />{{ item.title }}
          </div>
          <el-checkbox
            v-model="item.isBind"
            class="leverFirst_check"
            @change="changecheck(item, $event)"
          />
          <el-input
            :value="item.orderId"
            disabled
            @input="value => changeSelect(value, item)"
          />
          <!-- <a-select
            v-model="item.orderId"
            show-search
            option-filter-prop="children"
            style="width: 30%;padding-top:5px;"
            @change="value => changeSelect(value, item)"
          >
            <template v-for="item1 in tableLen">
              <a-select-option
                v-if="selectArr1.includes(item1)"
                :key="item1"
                :value="item1"
                disabled
              >
                {{ item1 }}
              </a-select-option>
              <a-select-option v-else :key="item1" :value="item1">
                {{ item1 }}
              </a-select-option>
            </template>
          </a-select> -->
        </div>
        <draggable
          :class="!item.flag ? '' : 'displayson'"
          :list="item.children"
          :options="{ forceFallback: true }"
          @update="changePlaceSon($event, item.children)"
        >
          <div v-for="it in item.children" :key="it.id" class="SecondLevel">
            <div class="leverSecond">
              <div class="leverSecond_name">
                <i
                  v-if="it.children"
                  :class="
                    !it.flag ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
                  "
                  style="margin-right:5px;cursor: pointer"
                  @click="hiddenchildren(it)"
                />{{ it.title }}
              </div>
              <el-checkbox
                v-model="it.isBind"
                class="leverFirst_check"
                @input="changecheck(it, $event)"
              />
              <el-input
                :value="it.orderId"
                disabled
                @change="value => changeSelect(value, it)"
              />
            </div>
            <draggable
              :class="!it.flag ? '' : 'displayson'"
              :list="it.children"
              :options="{ forceFallback: true }"
              @update="changePlacegrandson($event, it.children)"
            >
              <div v-for="ele in it.children" :key="ele.id" class="SecondLevel">
                <div class="leverSecond">
                  <div class="leverThird_name">{{ ele.title }}</div>
                  <el-checkbox
                    v-model="ele.isBind"
                    class="leverFirst_check"
                    @input="changecheck(ele, $event)"
                  />
                  <el-input
                    :value="ele.orderId"
                    disabled
                    @change="value => changeSelect(value, ele)"
                  />
                </div>
              </div>
            </draggable>
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>
<script>
// import Sortable from "sortablejs";
import draggable from 'vuedraggable';
// import DragTable from './DragTable';

export default {
  components: { draggable },
  props: {
    tabledata: {
      type: Object,
      default: () => ({})
    }
  },
  // inject:['getflag'],
  data() {
    return {
      selectArr: []
    };
  },
  computed: {
    tableData() {
      return this.tabledata.table || [];
    },
    tableLen() {
      return this.tabledata.len;
    },
    tablen() {
      return this.tabledata.tablen;
    },
    headerArr() {
      return this.tabledata.headerArr;
    },
    selectArr1() {
      return this.findorderId(this.tableData, []);
    },
    allCheck1() {
      return this.tabledata.flagAll;
    }
  },
  created() {
    // // 阻止默认行为
    // document.body.ondrop = function(event) {
    //   event.preventDefault();
    //   event.stopPropagation();
    // };
    // this.rowDrop();
  },
  mounted() {
    this.$emit('checklist', this.headerArr);
  },
  methods: {
    changecheckAll(arr, flag) {
      arr.forEach(item => {
        item.isBind = flag;
        if (item.children) {
          this.changecheckAll(item.children, flag);
        }
      });
    },
    findisBind(arr) {
      arr.forEach(item => {
        if (item.isBind === true) {
          this.tabledata.tablen++;
        }
        if (item.children) {
          this.findisBind(item.children);
        }
      });
    },
    findHeader(arr) {
      arr.forEach(item => {
        if (item.isBind === true) {
          this.headerArr.push({
            headerId: item.id,
            orderId: item.orderId
          });
        }
        if (item.children) {
          this.findHeader(item.children);
        }
      });
    },
    changeAll(e) {
      this.changecheckAll(this.tableData, e);
      if (e === true) {
        this.tabledata.tablen = this.tableLen;
        this.findHeader(this.tableData);
        this.$emit('checklist', this.headerArr);
      } else {
        this.tabledata.tablen = 0;
        this.tabledata.headerArr = [];
        this.$emit('checklist', this.headerArr);
      }
    },
    // changeIsBind
    addflag(arr) {
      arr.forEach(item => {
        if (item.children) {
          item.flag = '';
          return this.addflag(item.children);
        }
      });
      return arr;
    },
    findorderId(data, arr = []) {
      if (data && data.length) {
        data.forEach(item => {
          arr.push(item.orderId);
          if (item.children) {
            return this.findorderId(item.children, arr);
          }
        });
      }

      return arr;
    },
    delheader(arr, id) {
      arr.forEach((item, index) => {
        if (item.headerId === id) {
          arr.splice(index, 1);
        }
      });
    },
    changecheck(v, $event) {
      if (v.children) {
        this.changecheckAll(v.children, $event);
      }
      this.tabledata.tablen = '';
      this.findisBind(this.tableData);
      if (this.tablen === this.tableLen) {
        this.tabledata.flagAll = true;
      } else {
        this.tabledata.flagAll = false;
      }
      if ($event === true) {
        if (v.orderId === '') {
          v.orderId = 1;
        }
      }
      this.$emit('changeData');
      this.$emit('findisBindchecked', this.tableData);
      this.$emit('checklist', this.headerArr);
      // if ($event === true) {
      //   if (v.orderId === "") {
      //     v.orderId = 1;
      //   }
      //   this.headerArr.push({ headerId: v.id, orderId: v.orderId });
      //   this.$emit("checklist", this.headerArr);
      // } else if ($event === false) {
      //   this.delheader(this.headerArr, v.id);
      //   this.$emit("checklist", this.headerArr);
      // }
    },
    findid(arr, id, value) {
      arr.forEach(item => {
        if (item.headerId === id) {
          item.orderId = value;
        }
      });
    },
    changeSelect(value, row) {
      this.findid(this.headerArr, row.id, value);
      this.$emit('checklist', this.headerArr);
    },
    findflag(arr, id) {
      arr.forEach(item => {
        if (item.id === id && item.children) {
          if (item.flag === '' || !item.flag) {
            this.$set(item, 'flag', id);
          } else {
            this.$set(item, 'flag', '');
          }
        } else if (item.children) {
          this.findflag(item.children, id);
        }
      });
    },
    hiddenchildren(v) {
      this.findflag(this.tableData, v.id);
    },
    changePlace(e) {
      // console.log(e.newIndex + 1, e.oldIndex + 1);
      if (!this.tablen && !this.headerArr.length) {
        this.findHeaderfalse(this.tableData);
      }
      if (e.newIndex > e.oldIndex) {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[e.newIndex].orderId = e.newIndex + 1;
          if (i !== e.newIndex) {
            this.tableData[i].orderId = i + 1;
          }
          // if (this.tableData[i].isBind === true) {
          this.findid(this.headerArr, this.tableData[i].id, i + 1);
          // }
        }
      } else {
        for (let j = this.tableData.length - 1; j >= 0; j--) {
          this.tableData[e.newIndex].orderId = e.newIndex + 1;
          if (j !== e.newIndex) {
            this.tableData[j].orderId = j + 1;
          }
          // if (this.tableData[j].isBind === true) {
          this.findid(this.headerArr, this.tableData[j].id, j + 1);
          // }
        }
      }
      // this.tableData[e.oldIndex].orderId = e.oldIndex + 1;
      // if (this.tableData[e.newIndex].isBind === true) {
      //   this.findid(
      //     this.headerArr,
      //     this.tableData[e.newIndex].id,
      //     e.newIndex + 1
      //   );
      // }
      // if (this.tableData[e.oldIndex].isBind === true) {
      //   this.findid(
      //     this.headerArr,
      //     this.tableData[e.oldIndex].id,
      //     e.oldIndex + 1
      //   );
      // }
      this.$emit('checklist', this.headerArr);
    },
    findHeaderfalse(arr) {
      arr.forEach(item => {
        this.headerArr.push({
          headerId: item.id,
          orderId: item.orderId
        });
        if (item.children) {
          this.findHeaderfalse(item.children);
        }
      });
    },
    changePlaceSon(e, arr) {
      if (!this.tablen && !this.headerArr.length) {
        this.findHeaderfalse(this.tableData);
      }
      if (e.newIndex > e.oldIndex) {
        for (let i = 0; i < arr.length; i++) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (i !== e.newIndex) {
            arr[i].orderId = i + 1;
          }
          // if (arr[i].isBind === true) {
          this.findid(this.headerArr, arr[i].id, i + 1);
          // }
        }
      } else {
        for (let j = arr.length - 1; j >= 0; j--) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (j !== e.newIndex) {
            arr[j].orderId = j + 1;
          }
          // if (arr[j].isBind === true) {
          this.findid(this.headerArr, arr[j].id, j + 1);
          // }
        }
      }
      // if (arr[e.newIndex].isBind === true) {
      //   this.findid(this.headerArr, arr[e.newIndex].id, e.newIndex + 1);
      // }
      // if (arr[e.oldIndex].isBind === true) {
      //   this.findid(this.headerArr, arr[e.oldIndex].id, e.oldIndex + 1);
      // }
      this.$emit('checklist', this.headerArr);
    },
    changePlacegrandson(e, arr) {
      if (!this.tablen && !this.headerArr.length) {
        this.findHeaderfalse(this.tableData);
      }
      if (e.newIndex > e.oldIndex) {
        for (let i = 0; i < arr.length; i++) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (i !== e.newIndex) {
            arr[i].orderId = i + 1;
          }
          // if (arr[i].isBind === true) {
          this.findid(this.headerArr, arr[i].id, i + 1);
          // }
        }
      } else {
        for (let j = arr.length - 1; j >= 0; j--) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (j !== e.newIndex) {
            arr[j].orderId = j + 1;
          }
          // if (arr[j].isBind === true) {
          this.findid(this.headerArr, arr[j].id, j + 1);
          // }
        }
      }
      this.$emit('checklist', this.headerArr);
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: none !important;
}
/deep/.caret-wrapper {
  display: none;
}
/deep/.el-table__row {
  height: 56px;
}

//----------------------------------
.leverFirst,
.leverSecond {
  display: flex;
  text-align: center;
  padding: 5px 0;
}
.leverSecond {
  display: flex;
  padding: 5px 0;
}
.leverFirst_name {
  width: 40%;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.leverSecond_name {
  width: 40%;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 40px;
}
.leverThird_name {
  width: 40%;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 50px;
}
.leverFirst_check {
  width: 30%;
  line-height: 42px;
}
.displayson {
  display: none;
}
/deep/.el-input {
  width: 30%;
}
.leverFirst {
  border-bottom: 1px solid #dcdcdd;
  &:hover {
    background-color: #f4f4f4;
  }
}
.leverSecond {
  border-bottom: 1px solid #f0f0f0;
  &:hover {
    background-color: #f4f4f4;
  }
}
</style>
